<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && isHomePage && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{ packageTitles }}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ packageDesc }}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMorePackage">更多</span>
    </div>
    <div class=" c-pt30 c-flex-row" v-for="(item, index) in packageList" :key="index" @click="clickGoPackage(item.cId)">
      <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <vip-status :item="item"></vip-status>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb10">
        <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh36">{{ item.name }}</div>
        <div class="c-flex-row c-aligni-end c-justify-sb">
          <div class="c-fs18 c-fc c-fc-gray" v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
          <div class="c-fs18 c-fc c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))">{{ item.visits | formatNumber }}人观看</div>
          <div class="theme-fc c-flex-row c-aligni-end" :class="item.payType == 2 ? 'c-fs24 c-fw600' : 'c-fs22'">
            <span v-if="item.payType == 2">{{ '￥' | iosPriceFilter(item.optimal) }}</span>
            {{ item.payType | priceValueFilter(item.price, 61, item.optimal) }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt40 c-bd-b12-f5" v-else-if="themeName == 'mb4' && isHomePage && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20">
        <span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>
        {{ packageTitles }}
      </span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ packageDesc }}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMorePackage">查看更多</span>
    </div>

    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb30">
      <div class="c-ww180  c-pt30" v-for="(item, index) in packageList" :key="index" @click="clickGoPackage(item.cId)">
        <div class="c-ww180 c-hh120 c-br10 c-text-hidden c-p">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
        </div>
        <div class="c-fs24 c-pt12 c-text-ellipsis2">{{ item.name }}</div>
        <div class="c-flex-row c-aligni-end c-pt16">
          <span class="theme-fc c-flex-row c-flex-grow1 c-w0" :class="item.payType == 2 ? 'c-fs24 c-fw600' : 'c-fs22'">
            <span v-if="item.payType == 2">{{ '￥' | iosPriceFilter(item.optimal) }}</span>
            {{ item.payType | priceValueFilter(item.price, 61, item.optimal) }}
          </span>
          <span class="c-fs18 c-fc-gray" v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</span>
          <span class="c-fs18 c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))">{{ item.visits | formatNumber }}人观看</span>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="themeName == 'mb3' && isHomePage && !isMicroPage">
    <index-three-title-com :titleName="packageTitles" :titleDesc="packageDesc" @clickMore="clickMorePackage"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <div class="c-flex-row c-pt24" v-for="(item, index) in packageList" :key="index" @click="clickGoPackage(item.cId)">
        <div class="c-pb24">
          <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
            <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
            <vip-status :item="item"></vip-status>
          </div>
        </div>
        <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == packageList.length - 1 ? '' : 'c-bd-b1'">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh36">{{ item.name }}</div>
          <div class="c-flex-row c-aligni-end c-justify-sb">
            <div :class="item.payType == 2 ? 'c-fs24 c-fw600' : 'c-fs22'" class="theme-fc">
              <span v-if="item.payType == 2">{{ '￥' | iosPriceFilter(item.optimal) }}</span>
              {{ item.payType | priceValueFilter(item.price, 61, item.optimal) }}
            </div>
            <div class="c-fs18 c-fc c-fc-gray" v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
            <div class="c-fs18 c-fc c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))">{{ item.visits | formatNumber }}人观看</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt24 c-pb40 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && isHomePage && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{ packageTitles }}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ packageDesc }}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMorePackage">更多套餐</span>
    </div>
    <div class="c-pt24 c-flex-row" v-for="(item, index) in packageList" :key="index" @click="clickGoPackage(item.cId)">
      <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <vip-status :item="item"></vip-status>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column" :class="index == packageList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-fw-b c-lh36 c-hh72">{{ item.name }}</div>
        <div class="c-flex-row c-aligni-end c-justify-sb">
          <div class="c-fs18 c-fc-gray" v-if="item.payType == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
          <div class="c-fs18 c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))">{{ item.visits | formatNumber }}人观看</div>
          <span class="theme-fc c-flex-grow1 c-textAlign-r" :class="item.payType == 2 ? 'c-fs24 c-fw600' : 'c-fs22'">
            <span v-if="item.payType == 2">{{ '￥' | iosPriceFilter(item.optimal) }}</span>
            {{ item.payType | priceValueFilter(item.price, 61, item.optimal) }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt40 c-pb24" v-else-if="!isHomePage && !isNewRelatedStyle && styleType == 1">
    <div class="c-flex-row c-justify-sb">
      <h2 class="c-fw-n c-fc-xblack c-fs26 c-fw-b">
        {{ relevantTitles }}
        <span v-if="isExam == cfrom.exam || isExam == cfrom.itemBank || isExam == cfrom.mutuaTest || isExam == cfrom.voiceTest" class="c-fs20 theme-fc c-pl20">购买所属的课程后可参与{{ isExam == cfrom.exam ? '测评' : isExam == cfrom.itemBank ? '练习' : isExam == cfrom.mutuaTest ? '互动测评' : isExam == cfrom.voiceTest ? '语音测评' : '' }}</span>
      </h2>
      <span class="c-fs20 theme-fc" @click="clickGoAllPackage">查看全部</span>
    </div>
    <div class="c-flex-row" :class="index == 0 ? 'c-mt24' : 'c-mt40'" v-for="(item, index) in packageList" :key="index" @click="clickGoPackageOrColumn(item)">
      <div class="c-ww180 c-hh120 c-text-hidden">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover || item.avatar, require('../../assets/defult270.png'))" />
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
        <div class="c-fs24 c-text-ellipsis2">{{ item.name }}</div>
        <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
          <span>类型：{{ item.type == 1 ? '知识套餐' : item.type == 2 ? '专栏' : item.type == 5 ? '圈子' : item.type == 4 ? '训练营' : '实体商品' }}</span>
          <template v-if="(item.type != 1 && item.type != 2 && item.type != 4)
            || (item.type == 1 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))))
            || (item.type == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9))))
            || (item.type == 4 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))))"
          >
            <span v-if="item.type == 5">{{ item.people }}人已加入</span>
            <span v-else-if="item.type == 4">{{ item.people }}人已报名</span>
            <span v-else-if="item.payType == 2 || item.type == 3 || Number(item.price) > 0">{{ item.sales }}人已{{ $isWxAppIos() && [1, 2].includes(item.type) ? '观看' : '购买' }}</span>
            <span v-else>{{ item.clicks }}人观看</span>
          </template>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="!isHomePage && isNewRelatedStyle && styleType == 1" class="c-ph24 c-pt24 c-pb4 c-bg-white c-bd-b16-f5">
    <div class="c-flex-row c-justify-sb c-pb20">
      <h2 class="c-fc-xblack c-fs26 c-fw-b">
        {{ relevantTitles }}
        <span v-if="isExam == cfrom.exam || isExam == cfrom.itemBank || isExam == cfrom.mutuaTest || isExam == cfrom.voiceTest" class="c-fs20 theme-fc c-pl20">购买所属的课程后可参与{{ isExam == cfrom.exam ? '测评' : isExam == cfrom.itemBank ? '练习' : isExam == cfrom.mutuaTest ? '互动测评' : isExam == cfrom.voiceTest ? '语音测评' : '' }}</span>
      </h2>
      <span class="c-fs20 theme-fc" @click="clickGoAllPackage">查看全部</span>
    </div>
    <div class="c-flex-row c-aligni-start c-pt16" :class="packageList.length - 1 == index ? '' : 'bd-b1-f5'" v-for="(item, index) in packageList" :key="index" @click="clickGoPackageOrColumn(item)">
      <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br4 c-flex-shrink0">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover || item.avatar, require('../../assets/defult270.png'))" />
      </div>
      <div class="c-pb20 c-pl20 c-flex-grow1">
        <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
          <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{ item.name }}</div>
          <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
            <span>类型：{{ item.type == 1 ? '知识套餐' :
              item.type == 2 ? '专栏' :
              item.type == 5 ? '圈子':
              item.type == 6 ? '测评':
              item.type == 7 ? (item.courseType==2?'图文':item.courseType==1?'音频':'视频'):
              item.type == 4 ? '训练营' : '实体商品' }}</span>
            <template v-if="(item.type != 1 && item.type != 2 && item.type != 4)
              || (item.type == 1 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61))))
              || (item.type == 2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9))))
              || (item.type == 4 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(78))))"
            >
              <span v-if="item.type == 5">{{ item.people }}人已加入</span>
              <span v-else-if="item.type == 4">{{ item.people }}人已报名</span>
              <span v-else-if="item.payType == 2 || item.type == 3 || Number(item.price) > 0">{{ item.sales }}人已{{ $isWxAppIos() && [1, 2].includes(item.type) ? '观看' : '购买' }}</span>
              <span v-else>{{ item.clicks }}人观看</span>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-ph24 c-pt40 c-pb24" v-else-if="!isHomePage && styleType == 2">
    <div class="c-flex-row c-justify-sb">
      <h2 :class="articleType == 2 ? 'c-fs24' : 'c-fs26'" class="c-fw-n c-fc-xblack c-fw-b c-p">
        {{ relevantTitles }}
        <span v-if="articleType == 1" class="c-pa c-p-l0 c-p-bm4 c-w100 c-hh12 c-br6 theme-bg-10"></span>
      </h2>
      <span class="c-fs20 theme-fc" @click="clickGoAllPackage">查看全部</span>
    </div>
    <div class="c-flex-row c-pb20" :class="[index == 0 ? 'c-mt32' : 'c-mt20', articleType == 2 && index != packageList.length - 1 ? 'c-bd-b1' : '']" v-for="(item, index) in packageList" :key="index" @click="clickGoPackageOrColumn(item)">
      <div class="c-ww180 c-hh120 c-text-hidden c-p c-br10">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br10 c-text-hidden'" imgClass="c-br10" :coverUrl="$addXossFilter(item.cover || item.avatar, require('../../assets/defult270.png'))" />
        <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">
          {{ item.type == 1 ? '知识套餐' :
            item.type == 2 ? '专栏' :
            item.type == 5 ? '圈子':
            item.type == 6 ? '测评':
            item.type == 7 ? (item.courseType==2?'图文':item.courseType==1?'音频':'视频'):
            item.type == 4 ? '训练营' : '实体商品' }}
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
        <div class="c-fs24 c-text-ellipsis2 c-fc-xblack">{{ item.name }}</div>
        <span v-if="item.isSaleAlone!=1&&item.isSaleOnly!=1&&item.isSaleTogether==1" class="c-fc-xmlred c-fs24">
          关联售卖
        </span>
        <span v-else class="c-fc-xmlred" :class="item.payType == 2 && Number(item.price) != 0 ? 'c-fs24 c-fw600' : 'c-fs22'">
          <span v-if="item.payType == 2 && Number(item.price) != 0">{{'￥' | iosPriceFilter(item.optimal)}}</span>{{item.payType | priceValueFilter(item.price, 61, item.optimal)}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import indexThreeTitleCom from '@/components/templates/common/indexThreeTitleCom.vue';
import { utilJs } from '@/utils/common.js';
import vipStatus from '@/components/templates/common/vipStatus.vue';
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: 'PackageIndexCom',
  components: {
    indexThreeTitleCom,
    vipStatus,
    CoverImg
  },
  props: {
    packageTitles: {
      type: String,
      default: '知识套餐'
    },
    packageDesc: {
      type: String,
      default: '知识套餐'
    },
    isExam: {
      type: Number,
      default: 0
    },
    relevantTitles: {
      type: String,
      default: '相关频道'
    },
    packageList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1 //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isHomePage: {
      type: Boolean,
      default: true
    },
    proType: {
      //产品类型，1：课程，4：专栏，5：资料
      type: Number,
      default: -1
    },
    proId: {
      type: Number,
      default: -1
    },
    showAll: {
      type: Boolean,
      default: false
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Number,
      default: 0
    },
    isNewRelatedStyle: {
      //课程、专栏、电子书相关推荐样式改了
      type: Boolean,
      default: false
    },
    islive: {
      type: Number,
      default: 0
    },
    visible: {
      type: Object,
      default: () => {
        return {
          priceVisible: true, // 价格、商品价格
          originalPriceVisible: true, // 划线价格
          dataVisible: true, // 商品数据、数据字段、数据
          statusVisible: true, // 状态
          forecastVisible: true, // 预告时间
          qrVisible: true, // 预告二维码
          vipVisible: true // vip角标
        };
      }
    },
    styleType: {
      type: Number,
      default: 1
    },
    showPackageModal: {
      type: Boolean,
      default: false
    },
    articleType: { //图文文章模式样式
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      theme: localStorage.getItem('colorName') || 'mb5_default',
      themeName: localStorage.getItem('themeName') || 'mb5',
      cfrom: global.ckFrom,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        };
        window.androidWechatRoute.doAction(JSON.stringify(data));
      } else {
        this.$routerGo(this, 'push', { path: toPath });
      }
    },
    clickGoAllPackage() {
      if (this.islive) {
        this.$emit('clickALLMore');
      } else {
        // 详情半弹窗展示列表
        if (this.showPackageModal) {
          let data = {
            showAll: this.showAll,
            proType: this.proType,
            proId: this.proId,
            isExam: this.isExam
          }
          this.$emit('clickGoAllPackage', data);
        } else {
          let toPath = `/homePage/package/packageList?showAll=${this.showAll}&proType=${this.proType}&proId=${this.proId}&isExam=${this.isExam}`;
          this.iosAppRouteChange(toPath);
        }
      }
    },
    clickMorePackage() {
      let toPath = `/homePage/package/packageList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoPackage(combosId) {
      let toPath = `/homePage/package/packageDetail?combosId=${combosId}`;
      this.iosAppRouteChange(toPath);
    },
    clickGoPackageOrColumn(item) {
      if (item.type == 1) {
        let toPath = `/homePage/package/packageDetail?combosId=${item.cId}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 2) {
        let toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${item.columnId}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 3) {
        let toPath = `/mall/shopDetail/shopDetail?shopNo=${item.mgId}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 4) {
        let toPath = `/homePage/camp/campDetail?campId=${item.ttId}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 5) {
        let toPath = `/homePage/circle/circleFeed?id=${item.id}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 6) {
        let toPath = `/homePage/examination/examinationDetail?ExaminationNo=${item.id}`;
        this.iosAppRouteChange(toPath);
      } else if (item.type == 7) {
        let toPath = ''
        if (item.courseType == 2) {
          toPath = `/homePage/course/imgText?courseId=${item.id}&extId=-1&ckFrom=5`
        } else if (item.courseType == 1) {
          toPath = `/homePage/course/voice?courseId=${item.id}&extId=-1&ckFrom=5`
        } else if (item.courseType == 0) {
          toPath = `/homePage/course/video?courseId=${item.id}&extId=-1&ckFrom=5`
        }
        this.iosAppRouteChange(toPath);
      }
    }
  }
};
</script>

<style scoped>
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.bd-b1-f5 {
  border-bottom: 1px solid #f5f5f5;
}
</style>
